<template>
  <div class="top">
    <!-- <p>申报立项</p> -->
    <el-menu
      mode="horizontal"
      active-text-color="#0b847b"
      :default-active="activeIndex"
      @select="handleSelect"
    >
      <el-menu-item index="1">申报立项</el-menu-item>
      <el-menu-item index="2" v-if="pType == 1 && isDegnJi">补充材料</el-menu-item>
      <el-menu-item index="3" v-if="pType != 1 && isDegnJi && showDJJG">登记结果</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  computed: {
    showDJJG() {
      const arr = this.$store.state.project.projectInfo.processList
      return arr.length > 0 && arr[2].processName == '登记结果';
    },
    pType() {
      return this.$store.state.project.projectInfo.type;
    },
    // 是否是进行登记结果
    isDegnJi() {
      return this.$store.state.project.projectInfo.isDegnJi;
    },
  },
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key + "";
      this.$emit("topClickFn", key);
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  position: relative;
  overflow: hidden;
  width: 100%;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding-left: 20px;
  box-sizing: border-box;
  margin-bottom: 10px;

  font-size: 16px;
  font-weight: bold;
  color: #3b95ff;

  p {
    height: 50%;
    border-bottom: 2px solid #3b95ff;
  }
}
</style>
